<script type="text/javascript" src="/js/mac/flow/base.js"></script>
<!-- <script type="text/javascript" src="/js/mac/flow/view.js"></script> -->
<script type="text/javascript">
$(function(){
	var pg = App.soagov.flowView.ui, pp = pg.params || {}
		, catalog = pp.catalog || App.getHashParam('catalog')
		, id = pp.id || App.getHashParam('id')
		, code = pp.code || App.getHashParam('code')
		, cvsBox = pg.children('.cvsBox')
		, cvsPl = $('#flowCvs')
		, cvsEl = document.getElementById('flowCvs')
		, cvsCtx = cvsEl.getContext('2d')
		, flow = Flow.new1({ id: id }, cvsPl)
		, loading = mac.wait('Loading...')
		, propPl = pg.children('.propPl')
		, _selected, faces, byMe, coms = {};
	
	var propPg = App.show({
		ctx: 'soagov',
		action: 'nodeProp',
		params:{
			flowId: code,
			catalog: catalog
		}
	}, $.noop, propPl);
	
	// 载入当前flow所依附的对象（服务）
//	$.get(App.soagov.ctx + '/' + type + '/get.do', {
	$.get(pp.url || (App.soagov.ctx + '/flow/get.do'), {
		id: id
	}, function(rs) {
		var ro = mac.eval(rs);
		if (!ro.success) {
			loading.close();
			mac.alert(ro.data, ro.params);
			return;
		}
		
		var fo = ro.data;
		faces = ro.faces || {};
		byMe = ro.byMe;
		var hm = $('#head>.main');
		hm.seek('name').text(fo.name);
		hm.seek('code').text('（' + fo.code + '）');
		hm.seek('path').text('导出路径：' + fo.path);
		
		//载入当前flow所依赖的组件
		$.get(App.soagov.ctx + '/com/list.do', {
			id: id,
			pageNo: 1,
			pageSize: 9999
		}, function(rs) {
			var ro = mac.eval(rs);
			if (!ro.success) {
				loading.close();
				mac.alert(ro.data, ro.params);
				return
			}
			$.each(ro.data.list, function(i, c){
				var a = mac.eval(c.json);
				a.o = c.id;
				coms[c.id] = a;
			});
			
			//载入flow的图表
			$.get(App.soagov.ctx + '/flow/load.do', {
				id: id
			}, function(rs) {
				loading.close();
				var ro = mac.eval(rs);
				if (!ro.success) {
					mac.alert(ro.data, ro.params);
					return
				}
				var rd = ro.data;
				
				if (rd) {
					cvsEl.width = rd.m.w;
					cvsEl.height = rd.m.h;
					$.extend(rd, fo);
					flow = Flow.from(rd, coms, faces);
				}
				flow.o = id;
				propPg.init(flow, faces, cvsEl, cvsCtx);
				refresh();
			});
		});
	});
	
	function toCvsPos(x, y){
		var p = cvsBox.position();
		return {
			x: x - p.left - 12 + cvsBox.scrollLeft(),
			y: y - p.top - 12 + cvsBox.scrollTop()
		}
	}
	function getCvsPos(e){
		return toCvsPos(e.clientX, e.clientY);
	}
	function refresh(){
		flow.draw(cvsCtx);
	}

	function unselect1(){
		_selected = null;
		var ns = flow.nodes;
		for (var i=1; i < ns.length; i++) {
			var a = ns[i];
			if (a) {
				a.s = 0;
			}
		}
	}

	cvsPl.mousedown(function(e){
		var ns = flow.nodes, p0 = getCvsPos(e);
		unselect1(flow);
		for (var i=1; i < ns.length; i++) {
			var n = ns[i] || {};
			if (n.onMe && n.onMe(p0)) {
				n.s = 1;
				_selected = n;
				refresh();
				propPg.setProps(n);
				return 1;
			}
		}
		if (!_selected) {
			_selected = flow;
			propPg.setProps(flow);
		}
		refresh();
		return 1;
	});
	
	function adjust(){
		var h = pg.parent().height();
		pg.height(h);
		h -= 3;
		cvsBox.height(h).width(
			pg.width() - (propPl.is(':visible')? propPl.width():0)
		);
		propPl.height(h);
	}
	$(window).resize(adjust);
	adjust();
});
</script>
<div class="cvsBox">
	<canvas id="flowCvs" width="800" height="1132"
		style="background-color: #FFFFFF;"></canvas>
</div>
<div class="propPl form"></div>